import React from 'react'
import { Row, Col, Button, Space, InputNumber, Typography } from 'antd'
import { 
  ArrowUpOutlined, 
  ArrowDownOutlined,
  ClearOutlined,
  SendOutlined
} from '@ant-design/icons'
import { Utils } from '../../utils'

const { Text } = Typography

const MotionControl = ({ motionInputs, onControl, onInputChange, connected }) => {
  const { nValue, mValue } = motionInputs

  const motionButtons = [
    {
      group: 'M控制',
      buttons: [
        {
          key: 'upM',
          label: '向上M',
          icon: <ArrowUpOutlined />,
          type: 'primary',
          className: 'btn-m'
        },
        {
          key: 'downM',
          label: '向下M',
          icon: <ArrowDownOutlined />,
          type: 'primary',
          className: 'btn-m'
        }
      ]
    },
    {
      group: 'U控制',
      buttons: [
        {
          key: 'upU',
          label: '向上U',
          icon: <ArrowUpOutlined />,
          type: 'default',
          className: 'btn-u'
        },
        {
          key: 'downU',
          label: '向下U',
          icon: <ArrowDownOutlined />,
          type: 'default',
          className: 'btn-u'
        }
      ]
    },
    {
      group: 'N控制',
      buttons: [
        {
          key: 'upN',
          label: '向上N',
          icon: <ArrowUpOutlined />,
          type: 'dashed',
          className: 'btn-n'
        },
        {
          key: 'downN',
          label: '向下N',
          icon: <ArrowDownOutlined />,
          type: 'dashed',
          className: 'btn-n'
        }
      ]
    }
  ]

  const handleButtonClick = (action) => {
    if (!connected) {
      Utils.showToast('WebSocket未连接', 'warning')
      return
    }
    onControl(action)
    Utils.showToast(`执行${action}操作`, 'info', 1)
  }

  const handleInputChange = (key, value) => {
    onInputChange(key, value)
  }

  const handleSend = (type) => {
    if (!connected) {
      Utils.showToast('WebSocket未连接', 'warning')
      return
    }
    
    const value = type === 'N' ? nValue : mValue
    if (!value || value === '') {
      Utils.showToast(`请输入${type}值`, 'warning')
      return
    }
    
    onControl(type === 'N' ? 'sendN' : 'sendM')
    Utils.showToast(`发送${type}值: ${value}`, 'success')
  }

  const handleClear = () => {
    onControl('clear')
    Utils.showToast('输入已清除', 'info')
  }

  return (
    <div className="motion-control">
      <Row gutter={[0, 12]}>
        {/* 方向控制按钮组 */}
        {motionButtons.map((group, groupIndex) => (
          <Col span={24} key={groupIndex}>
            <div className="motion-group">
              <Text 
                style={{ 
                  color: '#b0bec5', 
                  fontSize: '12px',
                  marginBottom: '8px',
                  display: 'block'
                }}
              >
                {group.group}
              </Text>
              <Space size="small">
                {group.buttons.map((button) => (
                  <Button
                    key={button.key}
                    type={button.type}
                    icon={button.icon}
                    disabled={!connected}
                    onClick={() => handleButtonClick(button.key)}
                    className={`motion-btn ${button.className}`}
                    size="middle"
                  >
                    {button.label}
                  </Button>
                ))}
              </Space>
            </div>
          </Col>
        ))}
        
        {/* 数值输入和发送 */}
        <Col span={24}>
          <div className="motion-input-group">
            <Text 
              style={{ 
                color: '#b0bec5', 
                fontSize: '12px',
                marginBottom: '8px',
                display: 'block'
              }}
            >
              数值控制
            </Text>
            
            <Row gutter={[8, 8]}>
              {/* 清除按钮 */}
              <Col span={24}>
                <Button
                  icon={<ClearOutlined />}
                  onClick={handleClear}
                  disabled={!connected}
                  className="motion-btn btn-clear"
                  block
                >
                  清除
                </Button>
              </Col>
              
              {/* N值输入 */}
              <Col span={12}>
                <Space.Compact style={{ width: '100%' }}>
                  <InputNumber
                    placeholder="n"
                    value={nValue}
                    onChange={(value) => handleInputChange('nValue', value)}
                    disabled={!connected}
                    style={{ 
                      flex: 1,
                      backgroundColor: 'rgba(255, 255, 255, 0.1)',
                      borderColor: 'rgba(255, 255, 255, 0.3)',
                      color: '#ffffff'
                    }}
                    size="small"
                  />
                  <Button
                    type="primary"
                    icon={<SendOutlined />}
                    onClick={() => handleSend('N')}
                    disabled={!connected || !nValue}
                    size="small"
                  >
                    发送N
                  </Button>
                </Space.Compact>
              </Col>
              
              {/* M值输入 */}
              <Col span={12}>
                <Space.Compact style={{ width: '100%' }}>
                  <InputNumber
                    placeholder="m"
                    value={mValue}
                    onChange={(value) => handleInputChange('mValue', value)}
                    disabled={!connected}
                    style={{ 
                      flex: 1,
                      backgroundColor: 'rgba(255, 255, 255, 0.1)',
                      borderColor: 'rgba(255, 255, 255, 0.3)',
                      color: '#ffffff'
                    }}
                    size="small"
                  />
                  <Button
                    type="primary"
                    icon={<SendOutlined />}
                    onClick={() => handleSend('M')}
                    disabled={!connected || !mValue}
                    size="small"
                  >
                    发送M
                  </Button>
                </Space.Compact>
              </Col>
            </Row>
          </div>
        </Col>
      </Row>
    </div>
  )
}

export default MotionControl
